<template>
  <view class="container">
    <!-- 搜索栏 -->
    <search-bar @search="setSearchKeyword" @clear="clearSearch"></search-bar>
    
    <!-- 分类筛选 -->
    <category-filter 
      :selected-category="selectedCategory" 
      :category-stats="categoryStats"
      @select="selectCategory"
    ></category-filter>
    
    <!-- 账号列表 -->
    <account-list 
      :accounts="filteredAccounts"
      @view="viewAccount"
      @edit="editAccount"
      @delete="deleteAccount"
    ></account-list>
    
    <!-- 添加按钮，当弹窗显示时隐藏 -->
    <floating-action-button v-if="!showForm && !showDetail" @click="showAddForm"></floating-action-button>
    
    <!-- 账号表单 -->
    <account-form 
      :show="showForm" 
      @update:show="showForm = $event"
      :account="currentAccount"
      @submit="submitForm"
    ></account-form>
    
    <!-- 账号详情 -->
    <account-detail
      :show="showDetail"
      @update:show="showDetail = $event"
      :account="currentAccount"
      @edit="editAccount"
      @delete="deleteAccount"
    ></account-detail>
  </view>
</template>

<script>
import { useAccountStore } from '../../stores/account.js'

import SearchBar from '../../components/SearchBar.vue'
import CategoryFilter from '../../components/CategoryFilter.vue'
import AccountList from '../../components/AccountList.vue'
import AccountForm from '../../components/AccountForm.vue'
import AccountDetail from '../../components/AccountDetail.vue'
import FloatingActionButton from '../../components/FloatingActionButton.vue'

export default {
  components: {
    SearchBar,
    CategoryFilter,
    AccountList,
    AccountForm,
    AccountDetail,
    FloatingActionButton
  },
  data() {
    return {
      showForm: false,
      showDetail: false,
      currentAccount: null
    }
  },
  computed: {
    accountStore() {
      return useAccountStore()
    },
    filteredAccounts() {
      return this.accountStore.filteredAccounts
    },
    selectedCategory() {
      return this.accountStore.selectedCategory
    },
    categoryStats() {
      return this.accountStore.categoryStats
    }
  },
  onLoad() {
    // 页面加载时的初始化逻辑
  },
  methods: {
    // 设置搜索关键词
    setSearchKeyword(keyword) {
      this.accountStore.setSearchKeyword(keyword)
    },
    
    // 清空搜索
    clearSearch() {
      this.accountStore.clearSearch()
    },
    
    // 选择分类
    selectCategory(categoryId) {
      this.accountStore.setSelectedCategory(categoryId)
    },
    
    // 显示添加表单
    showAddForm() {
      this.currentAccount = null
      this.showForm = true
    },
    
    // 编辑账号
    editAccount(account) {
      this.currentAccount = account
      this.showForm = true
      this.showDetail = false
    },
    
    // 隐藏表单
    hideForm() {
      this.showForm = false
      this.currentAccount = null
    },
    
    // 提交表单
    submitForm(formData) {
      if (this.currentAccount) {
        // 更新账号
        this.accountStore.updateAccount(this.currentAccount.id, formData)
        uni.showToast({
          title: '账号已更新',
          icon: 'success'
        })
      } else {
        // 添加账号
        this.accountStore.addAccount(formData)
        uni.showToast({
          title: '账号已添加',
          icon: 'success'
        })
      }
      
      this.hideForm()
    },
    
    // 删除账号
    deleteAccount(account) {
      this.accountStore.deleteAccount(account.id)
      uni.showToast({
        title: '账号已删除',
        icon: 'success'
      })
      this.hideDetail()
    },
    
    // 查看账号详情
    viewAccount(account) {
      this.currentAccount = account
      this.showDetail = true
    },
    
    // 隐藏详情
    hideDetail() {
      this.showDetail = false
      this.currentAccount = null
    },
    

  }
}
</script>

<script setup>
// Vue 3 setup script
import { ref, computed, onMounted } from 'vue'
import { useAccountStore } from '../../stores/account.js'

// 状态管理
const accountStore = useAccountStore()
const showForm = ref(false)
const showDetail = ref(false)
const currentAccount = ref(null)

// 计算属性
const filteredAccounts = computed(() => accountStore.filteredAccounts)
const selectedCategory = computed(() => accountStore.selectedCategory)
const categoryStats = computed(() => accountStore.categoryStats)

// 生命周期钩子
onMounted(() => {
  // 页面加载时，如果没有账号数据，可以添加一些示例数据
  if (accountStore.accounts.length === 0) {
    addExampleAccounts()
  }
})

// 方法
// 设置搜索关键词
function setSearchKeyword(keyword) {
  accountStore.setSearchKeyword(keyword)
}

// 清空搜索
function clearSearch() {
  accountStore.clearSearch()
}

// 选择分类
function selectCategory(categoryId) {
  accountStore.setSelectedCategory(categoryId)
}

// 显示添加表单
function showAddForm() {
  currentAccount.value = null
  showForm.value = true
}

// 编辑账号
function editAccount(account) {
  currentAccount.value = account
  showForm.value = true
  showDetail.value = false
}

// 隐藏表单
function hideForm() {
  showForm.value = false
  currentAccount.value = null
}

// 提交表单
function submitForm(formData) {
  if (currentAccount.value) {
    // 更新账号
    accountStore.updateAccount(currentAccount.value.id, formData)
    uni.showToast({
      title: '账号已更新',
      icon: 'success'
    })
  } else {
    // 添加账号
    accountStore.addAccount(formData)
    uni.showToast({
      title: '账号已添加',
      icon: 'success'
    })
  }
  
  hideForm()
}

// 删除账号
function deleteAccount(account) {
  accountStore.deleteAccount(account.id)
  uni.showToast({
    title: '账号已删除',
    icon: 'success'
  })
  hideDetail()
}

// 查看账号详情
function viewAccount(account) {
  currentAccount.value = account
  showDetail.value = true
}

// 隐藏详情
function hideDetail() {
  showDetail.value = false
  currentAccount.value = null
}

// 添加示例账号数据
function addExampleAccounts() {
  const exampleAccounts = [
    {
      name: '微信',
      username: 'example@qq.com',
      password: 'Wx123456',
      category: 'social',
      website: 'https://wx.qq.com',
      description: '微信账号'
    },
    {
      name: '支付宝',
      username: '13800138000',
      password: 'Alipay@2023',
      category: 'finance',
      website: 'https://www.alipay.com',
      description: '支付宝账号'
    },
    {
      name: 'Steam',
      username: 'steamuser',
      password: 'Steam@Game2023',
      category: 'game',
      website: 'https://store.steampowered.com',
      description: '游戏平台账号'
    }
  ]
  
  exampleAccounts.forEach(account => {
    accountStore.addAccount(account)
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px 15px;
  background: #f8f9fa;
  min-height: 100vh;
}
</style>
